<template>
  <div>
      <div class="header-box">
        <div v-for="(item,index) of data" :key="item.item">
          <span><span :class="`title color${index}`">{{item.item}}</span></span>
          <span><span class="percent">{{item.bigTypeNumsPrecent | formatPer}}%</span>{{item.bigTypeNums}}个</span>
        </div>
      </div>
      <v-chart :forceFit="true" :height="height" :data="data" :padding="padding" :scale="scale">        
        <v-tooltip :onChange="handleChange" :htmlContent="htmlContent"/>
        <v-axis/>
        <v-legend dataKey="item"/>
        <v-pie position="percent" :color="pieColor" />
        <v-coord type="theta" :radius="0.75" :innerRadius="0.7" />

        <v-guide :type="guideOpts.type" :position="guideOpts.position" :html="getHtmlGuideHtml()" />
      </v-chart>
  </div>
</template>

<script>
  import { triggerWindowResizeEvent } from '@/utils/util'

  const DataSet = require('@antv/data-set')
  export default {
    name: 'SliceShapePie',
    props: {
      title: {
        type: String,
        default: ''
      },
      dataSource: {
        type: Array,
        default:()=>[
          // {item: '跨界革新',count2: 35, color: '#1190ff'}, 
          // {item: '政策资源',count2: 62, color: '#73d46c'}, 
          // {item: '专业精进',count2: 78, color: '#ff8751'}, 
          // {item: '综合管理',count2: 62, color: '#d521e9'}, 
        ]
      },
      height: {        
        default: 280
      }
    },
    data() {
      return {
        padding: ['10', '20'],
        scale: [{
          dataKey: 'percent',
          min: 0,
          formatter: '.0%'
        }],
        guideOpts: {
          type: 'html',
          position: [ '50%', '50%' ],
        },
        pieColor:['item',['#1190ff', '#73d46c', '#ff8751', '#d521e9']],       
        htmlContent:function htmlContent(title, items) {
          return '<div></div>';
        },      
        writen: {},
      }
    },
    filters: {
      formatPer(data) {
        if(!data) return 0
        return Number(data).toFixed()
      }
    },
    mounted () {
      triggerWindowResizeEvent()
    },
    computed: {
      data() {
        let dv = new DataSet.View().source(this.dataSource)        
        dv.transform({
          type: 'percent',
          field: 'bigTypeNums',
          dimension: 'item',
          as: 'percent'
        })
        return dv.rows
      }
    },
    methods: {
      handleChange(event, chart) {
        this.$set(this.writen, 'item', event.items[0].name)
        const obj =  this.dataSource.find(item =>{
          return item.item === event.items[0].name
        })
        this.$set(this.writen, 'bigTypeNums', obj.bigTypeNums)                
        this.getHtmlGuideHtml()
      },
      getHtmlGuideHtml(type){
        if(this.dataSource.length > 0){          
          const name = this.writen.item || this.dataSource[0].item
          const num = this.writen.bigTypeNums ||this.dataSource[0].bigTypeNums
          return '<div style="text-align: center;"><div style="color: #98baff; font-size: 14px">'+name +'</div>' +
          '<div style="color: #fff; font-size: 25px;">'+num+'个</div></div>' 
        }else{
          return '<div></div>'
        }     
      },
    }
  }
</script>

<style lang="less" scoped>
  .header-box{padding: 40px 0 50px;color:#fff;text-align: center;
    .title{position: relative;padding:0 20px;color: #98baff;
      &:before,&:after{content: '';position: absolute;top: 0;display: block;height: 100%;width: 1px;background-color: #323b8c;}
      &:before{left: 0;width: 5px;}
      &:after{right: 0;height: 90%;top: 5%;}
      &.color0:before{background-color: #1190ff;}
      &.color1:before{background-color: #73d46c;}
      &.color2:before{background-color: #ff8751;}
      &.color3:before{background-color: #d521e9;}
    }
    .percent{padding:0 20px;width: 75px;display: inline-block;}
    >div{margin-bottom: 10px;display: flex;
      >span{width: 50%;text-align: right;
        &:last-of-type{text-align: left;}
      }
    }
  }
</style>